<!-- 字典数据 -->
<script setup lang="ts">
import {
    getDictPage,
    getDictFormData,
    addDict,
    updateDict,
    deleteDict,
} from "@/api/dict";
import { DictPageVO, DictForm, DictQuery } from "@/api/dict/types";
import { Search } from '@element-plus/icons-vue'
defineOptions({
    name: "DictData",
    inheritAttrs: false,
});
const input3 = ref('')
const input4 = ref('')
const input5 = ref('')
const centerDialogVisible3 = ref(false)
const props = defineProps({
    typeCode: {
        type: String,
        default: () => {
            return "";
        },
    },
    typeName: {
        type: String,
        default: () => {
            return "";
        },
    },
});

watch(
    () => props.typeCode,
    (newVal: string) => {
        queryParams.typeCode = newVal;
        formData.typeCode = newVal;
        resetQuery();
    }
);

const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);

const queryParams = reactive<DictQuery>({
    pageNum: 1,
    pageSize: 10,
    typeCode: props.typeCode,
});

//const dictList = ref<DictPageVO[]>();

const dialog = reactive({
    title: "",
    visible: false,
});

const formData = reactive<DictForm>({
    status: 1,
    typeCode: props.typeCode,
    sort: 1,
});

const rules = reactive({
    name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
    value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
});

/**
 * 查询
 */
function handleQuery() {
    if (queryParams.typeCode) {
        loading.value = true;
        getDictPage(queryParams)
            .then(({ data }) => {
                dictList.value = data.list;
                total.value = data.total;
            })
            .finally(() => (loading.value = false));
    }
}

/**
 * 重置查询
 */
function resetQuery() {
    queryFormRef.value.resetFields();
    queryParams.pageNum = 1;
    handleQuery();
}

/**
 * 行checkbox change事件
 *
 * @param selection
 */
function handleSelectionChange(selection: any) {
    ids.value = selection.map((item: any) => item.id);
}

/**
 * 打开字典表单弹窗
 *
 * @param dictId 字典ID
 */
function openDialog(dictId?: number) {
    dialog.visible = true;
    if (dictId) {
        dialog.title = "修改字典";
        getDictFormData(dictId).then(({ data }) => {
            Object.assign(formData, data);
        });
    } else {
        dialog.title = "新增字典";
    }
}

/**
 * 字典表单提交
 */
function handleSubmit() {
    dataFormRef.value.validate((isValid: boolean) => {
        if (isValid) {
            loading.value = false;
            const dictId = formData.id;
            if (dictId) {
                updateDict(dictId, formData)
                    .then(() => {
                        ElMessage.success("修改成功");
                        closeDialog();
                        resetQuery();
                    })
                    .finally(() => (loading.value = false));
            } else {
                addDict(formData)
                    .then(() => {
                        ElMessage.success("新增成功");
                        closeDialog();
                        resetQuery();
                    })
                    .finally(() => (loading.value = false));
            }
        }
    });
}

/**
 * 关闭弹窗
 */
function closeDialog() {
    dialog.visible = false;
    resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
    dataFormRef.value.resetFields();
    dataFormRef.value.clearValidate();

    formData.id = undefined;
    formData.status = 1;
    formData.sort = 1;
    formData.typeCode = props.typeCode;
}

/**
 * 删除字典
 */
function handleDelete(dictId?: number) {
    const dictIds = [dictId || ids.value].join(",");
    if (!dictIds) {
        ElMessage.warning("请勾选删除项");
        return;
    }

    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        deleteDict(dictIds).then(() => {
            ElMessage.success("删除成功");
            resetQuery();
        });
    });
}

onMounted(() => {
    handleQuery();
});

/* 多选 */
const selectAll = ref(false);

function handleSelectAllChange() {
  // 将所有行的 _checked 属性设置为与全选多选框一致的状态
  dictList.value.forEach((row) => {
    row._checked = selectAll.value;
  });
}

/* 静态表格字段 */
const dictList = ref([
    {
        name: '商户1',
        value: 'M100001',
    },
    {
        name: '商户2',
        value: 'M100002',
    },
    {
        name: '商户3',
        value: 'M100003',
    },
    {
        name: '商户4',
        value: 'M100002',
    },
    {
        name: '商户5',
        value: 'M100003',
    },
    {
        name: '商户6',
        value: 'M100002',
    },
    {
        name: '商户7',
        value: 'M100003',
    },


]);
</script>

<template>
    <div class="app-container">
        <div class="" style="width: 90%;margin: 0 auto;  display:flex;justify-content:space-around;margin-top: -20px;">
            <p style="display:flex;width:335px;align-items:center;">
                <span
                    style="width:100px;height: 33px; display:flex;justify-content:flex-end;border:1px solid lightgray;padding:5px 0px;padding-right:10px;background-color:#8080800D">商户ID:</span>
                <span style="height: 33px;width: 250px; border: 1px solid lightgray;"></span>
            </p>

            <p style="display:flex;width:335px;align-items:center;">
                <span
                    style="width:100px;height:33px; display:flex;justify-content:flex-end;border:1px solid lightgray;padding:5px 0px;padding-right:10px;background-color:#8080800D">商户名称:</span>
                    <span style="height: 33px;width: 250px; border: 1px solid lightgray;"></span>
            </p>
        </div>

        <!--   <div class="" style="display:flex;align-items:center;height:50px">
            <div class="mt-4" style="width:90%;margin:0 auto;">
                <el-input v-model="input3" placeholder="输入产品编码/产品名称查找" class="input-with-select" style="margin-top:-20px;">
                    <template #append>
                        <el-button :icon="Search" />
                    </template>
                </el-input>
            </div>
        </div> -->

        <!-- <el-card shadow="never" style="margin-top:10px"> -->
        <!-- 数据表格 -->
        <el-table v-loading="loading" :data="dictList" border @selection-change="handleSelectionChange"
            style="width: 670px;margin: 0 auto;max-height: 300px;overflow-y: auto;">
            <!-- <el-table-column type="selection" width="50" /> -->
            <el-table-column label="商户支付产品" prop="name" />
            
            <el-table-column label="通道名称" >
                <template #header="{ column }">
                    <!-- 全选多选框 -->
                    <el-checkbox v-model="selectAll" @change="handleSelectAllChange" style="margin-right: 10px;"></el-checkbox>
                    {{ column.label }}
                </template>
                <template #default="{ row }">
                    <!-- 在这里自定义显示的内容，包括多选框和通道名称 -->
                    <div style="display: flex; align-items: center;">
                        <el-checkbox v-model="row._checked" @change=""></el-checkbox>
                        <span style="margin-left: 10px;">{{ row.value }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="日限额" >
                <template #default="{ row }">
                    <el-input v-model="input5" style="width:150px" type="number">
                        <template #append>
                            <el-button>￥</el-button>
                        </template>
                    </el-input>
                </template>
            </el-table-column>
        </el-table>
        <!-- </el-card> -->

    </div>
</template>


<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}
</style>
